<template>
  <view class="videos-box">
    <view class="videos-title">
      <Title icon="title-icon1" title="车辆视频"></Title>
    </view>
    <swiper class="index-videos" :current="swiperIndex" circular :interval="6000" :duration="500" next-margin="264rpx"
      @change="onSwiperChange">
      <swiper-item v-for="(itm, idx) in list" :key="idx">
        <view class="item">
          <view class="item-body">
            <video class="video" :src="itm.url"></video>
            <!-- <ImgIcon class="icon" size="112*112" src="static/icons/paly-icon.png"></ImgIcon> -->
            <!-- <view class="masking"></view> -->
            <!-- <view class="video-time">10:28</view> -->
          </view>
          <view :class="`item-btm two-ellipsis ${idx === swiperIndex && 'color-active'}`">
            <!-- <ImgIcon class="btm-icon" size="36*36" src="static/icons/icon-tuijian.png"></ImgIcon> -->
            <!-- <text style="color: #9CDB14;">EXPERT</text>
          <text style="color: #144BC4;">NEW</text> -->
            <text>{{ itm.title }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from "vue"
import Title from "@/components/ui/title"
import ImgIcon from "@/components/ui/img-icon"
const swiperIndex = ref(0)
const { list } = defineProps({
  list: Array,
})
function onSwiperChange(ev) {
  swiperIndex.value = ev.detail.current
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
